<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>盒模型</title>
		<style>

			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 200px;
				height: 200px;
				background-color: red;

				/* 上内填充 */
				/*padding-top: 20px;*/

				/* 左内填充 */
				/*padding-left: 50px;*/

				/* 右内填充 */
				/*padding-right: 60px;*/

				/* 下内填充 */
				/*padding-bottom: 40px;*/
				
				/* 上下左右 50px */
				/*padding: 50px;*/
				
				/*
					上下 50  左右 30
				*/
				/*padding: 50px 30px;*/
				

				/*
					上 左右 下
				*/
				/*padding: 50px 30px 10px;*/
				
				/* 上 右 下 左 */
				padding: 10px 20px 30px 40px;

				/* 
					上边框样式 
					solid: 实线;
					dashed: 虚线;
					dotted: 点线;
					double: 双实线;
					groove: 3d凹槽;
					ridge: 3d凸槽;
					outset: 3d凸边;
					inset: 3d凹边;
				*/
				/*border-top-style: solid;*/
				
				/* 
					上边框的宽度 
					thin: 1px 瘦的;
					thick: 5px 胖的;
					单位也可以给像素
				*/
				/*border-top-width: thin;*/
				
				/*
					上边框的颜色
				*/
				/*border-top-color: blue;*/
				
				/*
					宽度 样式 颜色
				*/
				/*border-top: 5px solid blue;
				border-left: 10px groove yellow;
				border-right: 3px dotted purple;
				border-bottom: 3px dashed skyblue;*/
				
				/* 边框 */
				border: 10px solid yellow;
				border-bottom: none;
				
				/* 上外边距 */
				/*margin-top: 50px;*/

				/* 左外边距 */
				/*margin-left: 200px;*/

				/* 下外边距 */
				/*margin-bottom: 200px;*/

				/* 右外边距 */
				/*margin-right: 50px;*/
				
				/* 上下左右 */
				margin: 50px;

				/* 上下 左右 */
				margin: 50px 20px;

				/* 上 左右 下 */
				margin: 50px 100px 0;

				/* 上 右 下 左 */
				margin: 50px 60px 70px 80px;



			}

			p {
				background-color: yellow;
				padding: 50px 0;
			}




		</style>
	</head>
	<body>

		<!-- 
			盒模型: 盒模型是网页设计中常用的一种盒子思维模型, 把网页中的每一个元素看做一个盒子

			盒子包含: 外边距(margin) + 边框(border) + 内填充(padding) + 内容(content)

			盒子的宽度: margin-left + border-left + padding-left + width(内容宽度) + padding-right + border-right + margin-right
			
			盒子的高度: margin-top + border-top + padding-top + height(内容高度) + padding-bottom + border-bottom + margin-bottom
	
		 -->

		<div></div>
		<p>Hello, world!</p>
		<ul>
			<li>呵呵</li>
			<li>哈哈</li>
			<li>嘿嘿</li>
		</ul>


		
	</body>
</html>